<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
登录页面
<form class="layui-form">
    <div id="captcha">
        <p class="wait">正在加载验证码......</p>
    </div>
    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
    <input type="hidden" name="captcha" required lay-verify="required"/>
    {:token_field()}
</form>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/gt.js"></script>
<script>
    layui.define(function () {
        let layer = layui.layer;
        let form = layui.form;
        let $ = layui.jquery;

        $.ajax({
            type: 'post',
            url: '/admin/Login/gt_register',
            dataType: 'json',
            success: function (data) {
                console.log(data)

                initGeetest({
                    gt: data.gt,
                    https: true,
                    challenge: data.challenge,
                    new_captcha: data.new_captcha,
                    product: 'popup',
                    width: '300px',
                    offline: false // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                }, function (captchaObj) {
                    // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
                    captchaObj.appendTo('#captcha');
                    captchaObj.onReady(function () {
                        $(".wait").remove();
                    });
                    captchaObj.onSuccess(function () {
                        //监听验证成功事件，进行二次验证
                        var result = captchaObj.getValidate();
                        console.log(result)
                        if (result) {
                            //能正常让表单提交
                            $('input[name="captcha"]').val('ok');
                        }
                    });
                    captchaObj.onError(function () {
                        captchaObj.reset(); // 调用该接口进行重置
                    });
                });


                return false;
            }
        });

        form.on('submit(formDemo)', function (data) {
            $.ajax({
                type: 'post',
                url: '/admin/Login/index',
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    if (res.status === 1) {
                        showSuc(res.msg);
                    } else {
                        showErr(res.msg);
                    }

                    return false;
                }
            });

            return false;
        })
    });
</script>
</body>
</html>